<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>主页</title>
    <!-- layUI的核心CSS文件 -->
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/css/layui.css"/>
    <!-- layUI的核心JS文件 -->
    <script src="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/layui.js" type="text/javascript"
            charset="UTF-8"></script>
    <script src="${pageContext.request.contextPath}/static/script/jquery-1.7.2.js" type="text/javascript"
            charset="UTF-8"></script>
    <style>
        .layui-card-body:hover {
            filter: alpha(Opacity=70);
            -moz-opacity: 0.7;
            opacity: 0.7;
        }

        .layui-card:hover{
            outline: 1px solid rgb(233,233,233);
        }

    </style>
    <link rel="stylesheet" type="text/css"
        href="${pageContext.request.contextPath}/static/css/toTop.css">
</head>
<body>
<script >


    function addItem(gid, gimg_path, gname, gprice) {
        //toFixed(2):是保留两位小数
        main.innerHTML += "<div class=\"layui-col-md3\" style=\"margin-top: 50px;padding: 12px;\">\n" +
            "        <div class=\"layui-card\" style='text-align: center'>\n" +
            /* 图片 */
            "                <a href=\"getSingleGood?gid=" + gid + "\"   target=\"_blank\" >\n" +
            "                        <div class=\"layui-card-body\" style=\"text-align: center;height: 260px;\">\n" +
            "                    <img src=\"" + gimg_path + "\" alt=\"图片加载失败\" style=\"max-width: 100%;max-height: 100%;\">\n" +
            /* 商品名 */
            "                        </div>\n" + gname +
            "                </a>\n" +
            /* 价格 */
            "            <div class=\"layui-card-header\">\n" +
            "                ￥  " + gprice.toFixed(2) + "\n" +
            "            </div>\n" +
            "    </div>"
    }
</script>
<!-- 搜索提交的表单是这个-->
<form class="layui-form" action="showGoodsSearchResult" method="post">
    <div>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <div class="layui-logo">
                    <a style="color: #009688;">龙洞闲置购物系统</a>
                </div>
                <!-- 头部区域（可配合layui已有的水平导航） -->
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item">
                        <a href="ShowALLGoods">首页</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">商品分类</a>
                        <dl class="layui-nav-child">
                            <%--                        先用书籍类测试ajax是否能实现--%>
                            <script>
                                function a1(cid) {
                                    let main = document.getElementById("main");

                                    //清空原商品,并将标题名改为该类
                                    main.innerHTML = "<div class=\"layui-row\">" +
                                        "<fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 50px\">\n" +
                                        "    <!-- 种类名称 -->\n" +
                                        "    <legend style=\"margin-left: 50px;\">" + cid + "商品</legend>\n" +
                                        "</fieldset>"
                                    $.ajax({
                                        url: "${pageContext.request.contextPath}/showGoodsBygcid",
                                        data: {gcid: cid},
                                        success: function (data, status) {
                                            var arr = data.goodsbygcid;
                                            if (arr != null) {
                                                for (var i = 0; i < data.goodsbygcid.length; i++) {
                                                    var gid = arr[i].gid;
                                                    var gname = arr[i].gname;
                                                    var gprice = arr[i].gprice;
                                                    var gimg_path = arr[i].gimg_path;
                                                    addItem(gid, gimg_path, gname, gprice);
                                                }
                                            } else {
                                                main.innerHTML += "<p>暂无商品</p>"
                                            }
                                            mouseOutline();
                                            console.log(data);
                                            console.log(status);
                                        },
                                    });
                                    main.innerHTML += "</div>";
                                }
                                //    ------------------------------------------------------------
                            </script>
                                <c:forEach items="${categories}" var="category">
                                    <dd><a onclick="a1('${category.cname}')" style="user-select: none">${category.cname}</a></dd>
                                </c:forEach>
                        </dl>
                    </li>

                    <form class="layui-form" action="showGoodsSearchResult" method="post">

                        <div class="layui-input-inline" style="width: 400px;">
                            <!--  -->
                            <script>
                                // let main1;
                                // function getmain(){
                                //     main1 = document.getElementById("main").innerHTML;
                                // }
                                // window.onload=getmain();
                                function tomessage() {
                                    let main = document.getElementById("main");
                                    //alert("gmessage="+$("#gmessage").val());
                                    $.ajax({
                                        url: "${pageContext.request.contextPath}/showGoodsSearchResult1",
                                        data: {"gmessage": $("#gmessage").val()},
                                        success: function (data, status) {
                                            var goods = data.goodsresult;
                                            var name="查询结果";
                                            // if(data.sg=="0") {
                                            //     name="所有商品";
                                            // }
                                            if($("#gmessage").val()=="") {
                                                name="所有商品"};
                                                main.innerHTML = "<div class=\"layui-row\">" +
                                                    "<fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 50px\">\n" +
                                                    "    <!-- 种类名称 -->\n" +
                                                    "    <legend style=\"margin-left: 50px;\">" + name + "</legend>\n" +
                                                    "</fieldset>";
                                                for (var i = 0; i < goods.length; i++) {
                                                    addItem(goods[i].gid, goods[i].gimg_path, goods[i].gname, goods[i].gprice);

                                                }

                                                main.innerHTML += "</div>";
                                            // }else {
                                            // main.innerHTML=main1;
                                            // }
                                                mouseOutline();
                                            console.log(data);
                                            console.log(status);
                                        }
                                    })

                                }
                            </script>
                            <input type="text" name="gmessage" id="gmessage" oninput="tomessage()"
                                   required
                                   lay-verify="required" placeholder="请输入关键字"
                                   autocomplete="off"
                                   class="layui-input"
                                   style="margin-left: 100px">
                        </div>
                        <button class="layui-btn" lay-submit style="margin-left: 100px">
                            <i class="layui-icon">&#xe615;</i>
                        </button>
                    </form>
                    <script type="text/javascript">
                        layui.use('form', function () {
                            var form = layui.form;
                            form.on('submit(search)', function (data) {
                                console.log(data);
                                return false;
                            });
                        });
                    </script>
                </ul>
                <%@include file="head.jsp" %>
            </div>
        </div>
    </div>
</form>


<!-- 内容主体区域 -->

<div id="main" style="margin: 50px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px">
        <legend style="margin-left: 50px;">所有商品</legend>
    </fieldset>

    <div class="layui-row">
        <c:forEach var="goods" items="${goodslist}">
            <div class="layui-col-md3" style="margin-top: 50px; padding: 12px">
                <div class="layui-card" style="text-align: center">
                    <a href="getSingleGood?gid=${goods.gid}" target="_blank">
                        <div class="layui-card-body" style="text-align: center;height: 260px;">
                                <%-- 图片 --%>
                            <c:if test="${goods.gimg_path==''}">
                                <img src="static/images/white1.jpg" alt="图片加载失败"
                                     style="max-width: 100%;max-height: 100%;">
                            </c:if>
                            <c:if test="${goods.gimg_path!=''}">
                                <img src="${goods.gimg_path}" alt="图片加载失败"
                                     style="max-width: 100%;max-height: 100%;">
                            </c:if>
                        </div>
                            <%-- 商品名 --%>
                            ${goods.gname}
                    </a>
                    <!-- 价格 -->
                    <div class="layui-card-header">
                        ￥${goods.gprice}
                    </div>
                </div>
            </div>
        </c:forEach>

    </div>
</div>

<%--回到顶部--%>
<i class="layui-icon layui-icon-up toTop"></i>
<script src="${pageContext.request.contextPath}/static/js/toTop.js">
</script>




<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });

    <c:if test="${idRepeat == 500}">
    layui.use('layer', function () {
        var layer = layui.layer;
        layer.msg('不可购买自己发布的商品');
    });
    </c:if>
</script>

</body>
</html>

